<template>
  <form autocomplete="off" class="form2">
    <div class="password">
      <input type="password" placeholder="新密码" v-model="password" @input="reset_passwordError" :class="{'inputError': passwordErrorMessage}">
      <div class="passwordError">{{ passwordErrorMessage }}</div>
    </div>
    <div class="repassword">
      <input type="password" placeholder="确认新密码" :class="{'inputError': confirmPasswordErrorMessage}" v-model="confirm_password" @input="reset_confrimPasswordErrorMessage">
      <div class="errorMessage">{{ confirmPasswordErrorMessage }}</div>
    </div>
    <div class="tips">*密码由8-16位数字、大写字母、小写字母组成</div>
  </form>
</template>

<script>
export default {
  name: 'from2',
  data () {
    return {
    }
  },
  computed: {
    // 新密码
    password: {
      get () {
        return this.$store.state.findPassword.password
      },
      set (val) {
        this.$store.commit('findPassword/set_password', val)
      }
    },
    // 确认新密码
    // eslint-disable-next-line vue/no-dupe-keys
    confirm_password: {
      get () {
        return this.$store.state.findPassword.confirm_password
      },
      set (val) {
        this.$store.commit('findPassword/set_confirm_password', val)
      }
    },
    // 新密码错误提示
    passwordErrorMessage () {
      return this.$store.state.findPassword.passwordErrorMessage
    },
    // 确认密码错误提示
    confirmPasswordErrorMessage () {
      return this.$store.state.findPassword.errorMessage
    }
  },
  methods: {
    // 重置新密码错误提示
    reset_passwordError () {
      if (this.passwordErrorMessage) {
        this.$store.commit('findPassword/set_passwordErrorMessage', '')
      }
    },
    // 重置错误提示
    reset_confrimPasswordErrorMessage () {
      if (this.confirmPasswordErrorMessage) {
        this.$store.commit('findPassword/set_errorMessage', '')
      }
    }
  },
  created () {

  }
}
</script>

<style scoped lang="scss">
.form2 {
  padding: 0 70px;
  input {
    width: 400px;
    height: 48px;
    border: 1px solid #D8DEE9;
    border-radius: 2px;
    outline: none;
    padding-left: 16px;
    font-size: 16px;
    color: #0D172C;

    &::-webkit-input-placeholder {
      font-size: 16px;
      color: #9EAAC4;
    }
  }
  .inputError {
    border-color: #FF2929;
  }
  .password{
    margin-bottom: 32px;
    position: relative;
    .passwordError {
      position: absolute;
      font-size: 12px;
      color: #ff2929;
      top: 53px
    }
  }
  .repassword {
    margin-bottom: 32px;
    position: relative;
    .errorMessage {
      position: absolute;
      font-size: 12px;
      color: #ff2929;
      top: 53px;
    }
  }
  .tips {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #5f7196;
    line-height: 20px;
    margin-bottom: 16px;
  }
}
</style>
